<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="portrait" name="screen-orientation" />
    <meta content="portrait" name="x5-orientation" />
    <meta content="webkit" name="renderer" />
    <meta content="max-age=180" http-equiv="Cache-control" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>请配置页面标题</title>
    <meta name="keywords" content="请配置页面关键词" />
    <meta name="description" content="请配置页面描述" />
</head>

<head>
    <title>Flex Layout Example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: scroll;
            flex-grow: 1;
            background-color: #f1f1f1;
        }

        .list-item {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            width: 100%;
            max-width: 500px;
            box-sizing: border-box;
        }

        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
            color: #fff;
        }

        .input {
            display: flex;
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 0;
            background-color: #f1f1f1;
            box-sizing: border-box;
            outline: none;
        }

        .input:focus {
            background-color: #fff;
        }

        .button {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 0;
            cursor: pointer;
        }

        .button:hover {
            background-color: #3e8e41;
        }

        .chat {
            display: flex;
            overflow-x: hidden;
            width: 100%;
            height: 100vh;
            flex-direction: column;
        }
        .root {
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="root">
    <div class="chat">
        <div class="list">
            <div class="list-item">Item 1</div>
            <div class="list-item">Item 2</div>
            <div class="list-item">Item 3</div>
            <div class="list-item">Item 4</div>
            <div class="list-item">Item 5</div>
            <div class="list-item">Item 6</div>
            <div class="list-item">Item 7</div>
            <div class="list-item">Item 8</div>
            <div class="list-item">Item 9</div>
            <div class="list-item">Item 10</div>
            <div class="list-item">Item 11</div>
            <div class="list-item">Item 12</div>
            <div class="list-item">Item 13</div>
            <div class="list-item">Item 14</div>
            <div class="list-item">Item 15</div>
            <div class="list-item">Item 16</div>
            <div class="list-item">Item 17</div>
        </div>
        <div class="footer">
            <input type="text" class="input" placeholder="Enter your message...">
            <button class="button">Send</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('visibilitychange', function () {
      console.log('visibilitychange', document.visibilityState)
    })
</script>
</body>

</html>
